<script lang="tsx">
/**
 * 菜单
 */
export default {
  name: "menu-form"
}
</script>

<script lang="tsx" setup>
import {onMounted, Ref, ref} from "vue"
import {processRequest} from "anqin-framework";
import {GlobalConfigEnum} from "@/components/menu-form/index.ts";
import {useRouter} from "vue-router";

/**
 * 定义props
 */
const props = defineProps<{
  isRun: boolean
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", data: any): void
  (e: "reflashData"): void
}>()

/**
 * 路由
 */
const router = useRouter()

/**
 * 挂载
 */
onMounted(() => {
  reflashData()
})

/**
 * 获取数据
 */
const reflashData = () => {
  getGlobalData()
  getMenuList()
  emit("reflashData")
}

/**
 * 全局配置
 */
const globalData = ref({
  blogName: "",
  blogLogo: ""
})
const getGlobalData = async () => {
  const result = await processRequest.get("/api/BlogGlobalConfig", {
    pageSize: 9999
  })
  globalData.value = {
    blogName: result.dataList.find((item: any) => item.status === GlobalConfigEnum['网站名称'])?.content,
    blogLogo: result.dataList.find((item: any) => item.status === GlobalConfigEnum['网站Logo'])?.content
  }
}

/**
 * 获取菜单列表
 */
const menuList: Ref<any[]> = ref([])
const getMenuList = async () => {
  const result = await processRequest.get("/api/BlogMenu", {
    pageSize: 9999
  })
  menuList.value = result.dataList
}

/**
 * 菜单点击
 */
const handleSelect = (item: any) => {
  emit('change', item.id)
  router.push({
    path: item.code
  })
}

/**
 * 前往登录
 */
const handleLogin = async () => {
  window.open("https://anqin.yuyiting.work")
}

/**
 * 暴露
 */
defineExpose({
  reflashData
})
</script>

<template>
  <div :class="{'menu-form-active':props.isRun}" class="menu-form">
    <div :class="{'menu-container-active':props.isRun}" class="menu-container menu-container-background">
      <div class="container-left animate__animated animate__fadeInLeft">
        <img :src="globalData?.blogLogo" alt="" class="left-icon"/>
        <div class="left-content">{{ globalData?.blogName }}</div>
      </div>
      <div class="container-right animate__animated animate__fadeInRightBig">
        <!--PC端菜单-->
        <div class="menu-desktop">
          <div class="menu-list">
            <div v-for="(item,index) in menuList" :key="index" class="menu-item" @click="handleSelect(item)">
              <div class="item-top">
                <img v-if="item.image" :src="item.image" alt="" class="menu-item-image"/>
                <div class="menu-item-content">
                  {{ item.name }}
                </div>
              </div>
              <div class="item-bottom">
                <div class="item-bottom-line"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-other animate__animated animate__fadeInRight">
        <div class="container-other-logout">
          <div class="other-search">
            <!--            <img alt="" class="other-search-image" src="/image/icon/icon-search.svg"/>-->
          </div>
          <div class="other-login">
            <el-dropdown placement="bottom-end">
              <img alt="" class="other-logout-image" src="/image/icon/icon-user.svg"/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogin">登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>
